<template>
	<view class="content">
		<view class="topic-box" v-for="item in topicList" :key="item.id">
			<view class="topic-img">
				<image class="topic-img-image" :src="item.scene_pic_url" mode="widthFix"></image>
			</view>
			<view class="topic-top-txt">{{item.title}}</view>
			<view class="topic-center-txt">{{item.subtitle}}</view>
			<view class="topic-bottom-txt">{{item.price_info | priceFormat}}</view>
		</view>
		<view class="btn">
			<button :class="page==1?'btn-box':''" :disabled="page==1?true:false" @tap="changelist">上一页</button>
			<button :class="page==2?'btn-box':''" @tap="changelists" :disabled="page==2?true:false">下一页</button>
		</view>
		<customTabBar></customTabBar>
	</view>
</template>

<script>
	import customTabBar from "@/custom-tab-bar/index.vue"
	import {
		APITopicList
	} from '@/utils/api.js'
	export default {
		data() {
			return {
				topicList: [],
				list: [],
				page: 1
			}
		},
		components: {
			customTabBar
		},
		async onLoad() {
			let res = await APITopicList()
			console.log(res.data.data)
			this.list = res.data.data.filter((item, index) => index < 10)
			this.page = 1
			console.log(this.list);
			this.topicList = this.list
		},
		onShow() {
			this.$store.commit('changeTabbarIndex', 1);
		},
		methods: {
			async changelists() {
				this.page = 2
				window.scroll(0, 0)
				this.page = 2
				let res = await APITopicList()
				this.list = res.data.data.filter((item, index) => index >= 10)
				this.topicList = this.list

			},
			async changelist() {
				this.page = 1
				let res = await APITopicList()
				this.list = res.data.data.filter((item, index) => index < 10)
				this.topicList = this.list
				window.scroll(0, 0)
			}
		}
	}
</script>
<style lang="less" scoped>
	.content {
		background-color: #efefef;
	}

	.topic-box {
		width: 750rpx;
		text-align: center;
		background-color: white;
		margin-bottom: 40rpx;

		.topic-img {
			width: 750rpx;

			.topic-img-image {
				width: 100%;
			}
		}

		.topic-top-txt {
			margin-top: 25rpx;
			font-size: 34rpx;
		}

		.topic-center-txt {
			font-size: 30rpx;
			margin: 42rpx 0;
			overflow: hidden;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
			text-overflow: ellipsis;
			display: -webkit-box;
		}

		.topic-bottom-txt {
			font-size: 28rpx;
			padding-bottom: 40rpx;
			color: var(--price-color);
		}
	}

	.btn {
		display: flex;


		button::after {
			border: none;
		}

		.btn-box {
			flex: 1;
			color: #333;
			background-color: #f7f8fa;
			opacity: .5;

		}

		uni-button {
			background-color: #fff;
			color: darkred;
			width: 50%;
		}
	}
</style>
